<template>
  <div class="RoleTree-container">
    <div class="searchWrapper">
      <a-input-search placeholder="请搜索" @change="handleChange" />
    </div>
    <div class="content" v-if="dataSource.length">
      <a-tree
        ref="tree"
        :tree-data="dataSource"
        :replaceFields="replaceFields"
        :expanded-keys.sync="expandedKeys"
        @select="handleSelect"
      >
        <template :slot="replaceFields.title" slot-scope="scopes">
          <span v-if="scopes[replaceFields.title].indexOf(searchValue) > -1">
            {{ scopes[replaceFields.title].substr(0, scopes[replaceFields.title].indexOf(searchValue)) }}
            <span style="color: #f50">{{ searchValue }}</span>
            {{
              scopes[replaceFields.title].substr(scopes[replaceFields.title].indexOf(searchValue) + searchValue.length)
            }}
          </span>
          <span v-else>{{ scopes[replaceFields.title] }}</span>
        </template>
      </a-tree>
    </div>
    <a-empty description="暂无数据" v-else />
  </div>
</template>

<script>
import { getRoleManageList } from '@/api/system/system.js'
import { getBusinessCode } from '@/api/system/menuAndAuth.js'
import { Empty } from 'ant-design-vue'
export default {
  name: 'RoleTree',
  components: {
    AEmpty: Empty,
  },
  data() {
    return {
      searchValue: '',
      replaceFields: {
        title: 'name',
        key: 'id',
      },
      dataSource: [],
      expandedKeys: [],
    }
  },
  created() {
    this.getBusinessCodeReq()
  },
  methods: {
    async getRoleManageList(treeNode) {
      try {
        const params = {
          pageNo: 1,
          pageSize: 99999,
          command: treeNode.dataRef.command,
          enable: true,
        }
        const res = await getRoleManageList(params)
        treeNode.dataRef.children = res.data.list.map((item) => {
          item.isLeaf = true
          item.fullName = treeNode.dataRef.name + '/' + item.name // 拼接全路径名称
          item.selectable = false // 不可选择
          item.style = {
              display: 'block'
          }
          item.scopedSlots = {
              title: this.replaceFields.title // 插槽字段
          }
          return item
        })
        this.$emit('loadNode', treeNode)
      } catch (e) {
        console.error(e)
      }
    },
    async getBusinessCodeReq() {
      try {
        const res = await getBusinessCode()
        const list = res.data || []
        this.dataSource = list.map((item) => {
          return {
            id: item.command,
            command: item.command,
            name: item.commandName,
            children: []
          }
        })
        this.dataSource.forEach(item => {
            this.getRoleManageList({
                dataRef: item
            })
        })
      } catch (e) {
        console.error(e)
      }
    },
    handleSelect(selectedKeys, { node }) {
      const key = node.dataRef[this.replaceFields.key]
      // 展开选中节点
      if (!this.expandedKeys.includes(key)) {
        this.expandedKeys.push(key)
      }
      this.$emit('select', node)
    },
    handleChange(e) {
      const value = e.target.value
      this.searchValue = value
      // 查询结果的集合
      const targetKeys = []
      this.dataSource.forEach((item) => {
        item.children &&
          item.children.forEach((childItem) => {
            if (childItem[this.replaceFields.title].indexOf(value) > -1 && value !== '') {
                // 显示匹配项
                childItem.style.display = 'block'
                // 获取匹配项父级id
              if (!targetKeys.includes(item[this.replaceFields.key])) {
                targetKeys.push(item[this.replaceFields.key])
              }
            } else {
                childItem.style.display = 'none'
            }
            // 如果是空值，将所有节点显示
            if(value === '') {
                childItem.style.display = 'block'
            }
          })
      })
      this.expandedKeys = targetKeys
    },
  },
}
</script>

<style lang="less" scoped>
.RoleTree-container {
  .content {
    max-height: calc(var(--heightVh) * 0.6);
    overflow: auto;
  }
}
</style>